// 画布
const addon = require('./native/index.node');

module.exports = addon;

// 绘制
function Draw() {
    var canvas = document.getElementById('myCanvas');
    canvas.height = 960;
    canvas.width = 480;
    var ctx = canvas.getContext('2d');

    // 绘制圆
    this.drawCircle = function (ctx, x, y) {
        ctx.beginPath();
        ctx.arc(x, y, 10, 0, 2 * Math.PI);
        ctx.stroke();
    }

    // 重置画布
    this.reset = function (context) {
        // 保存当前渲染上下文所进行的变换
        context.save();

        // 重置渲染上下文并清空画布
        context.setTransform(1, 0, 0, 1, 0, 0);
        context.clearRect(0, 0, canvas.width, canvas.height);

        // 恢复先前渲染上下文所进行的变换
        context.restore();
    }

    this.drawLine = function (ctx, x1, y1, x2, y2) {
        ctx.beginPath();

        ctx.moveTo(x1, y1);

        ctx.lineTo(x2, y2);

        ctx.stroke();
    }

    // 绘制树
    this.load = function () {

        // 先重置画布
        this.reset(ctx);

        const text = document.getElementById("text").value;

        console.log(text);

        const y_distance = 30;

        const arr = addon.handleTreeStringInput(text);

        // 树的深度，从0开始
        let hi = Math.floor(Math.log2(arr.length));

        // 用来存每个数的y坐标
        const x_queue = [];
        // 最底层的个数就可以算出来了
        let bottom_len = Math.pow(2, hi);
        // 计算每一个的y坐标，并加入队列
        // 定义树之间的距离
        const tree_distance = 16;
        // 定义节点之间的距离
        const node_distance = 16;
        // 最左的y坐标就是0
        let x_tmp = 0;
        console.log("bottom_len " + bottom_len);
        for (let i = 0; i < bottom_len; i += 2) {
            x_queue.push(x_tmp);
            // 计算兄弟节点的x坐标
            x_tmp += 2 * node_distance;
            x_queue.push(x_tmp);

            // 下一个同级节点的x坐标
            x_tmp += tree_distance;
        }

        let y = hi * y_distance + 50;
        // 定义字体的高度，方便划线
        const font_height = 10;
        // 划线时x坐标的偏移
        const x_offset = 3;

        while (x_queue.length !== 0) {

            let length = x_queue.length;
            let arr_start_index = Math.pow(2, hi) - 1;

            console.log("length " + length);
            while (length !== 0) {

                if (length === 1) {
                    let x = x_queue.shift();
                    ctx.fillText(arr[0], x, y);
                    return;
                }


                // 左节点的
                let left = x_queue.shift();
                // 右节点
                let right = x_queue.shift();
                // 父节点
                let parent = (right - left) / 2 + left;

                if (arr_start_index < arr.length && arr[arr_start_index] !== "") {
                    console.log("draw " + arr[arr_start_index] + " " + left + " " + y);
                    // 画点
                    ctx.fillText(arr[arr_start_index], left, y);
                    // 划线
                    this.drawLine(ctx, left + x_offset, y - font_height, parent + x_offset, y - y_distance);
                }
                if (arr_start_index + 1 < arr.length && arr[arr_start_index + 1] !== "") {
                    console.log("draw " + arr[arr_start_index + 1] + " " + right + " " + y);
                    ctx.fillText(arr[arr_start_index + 1], right, y);
                    this.drawLine(ctx, right + x_offset, y - font_height, parent + x_offset, y - y_distance);
                }
                arr_start_index += 2;

                x_queue.push(parent);
                length -= 2;
            }

            y -= y_distance;
            hi -= 1;

        }

    }

}
